<?php include template('header','common');?>
<link rel="stylesheet" type="text/css" href="{__ROOT__}template/default/statics/css/tuobanquan.css?v={HD_VERSION}">
<script type="text/javascript" src="{__ROOT__}statics/js/haidao.validate.js?v={HD_VERSION}"></script>
<div class="mask"></div>
<style>
	.img-btn {
		position: fixed;
		width: 56px;
		height: 56px;
		top: 50%;
		right: 0;
		border-radius: 50%;
		margin-right: 0;
		margin-bottom: 0;
		z-index: 1;
	}

	.img-btn img {
		width: 56px;
		height: 56px;
	}
</style>
{if $member['group_id'] != 1}
<div id="file-avatar" class="img-btn" style="left:0;">
	<img src="{__ROOT__}template/default/statics/img/xiangji.png" alt="">
</div>
{/if}

<div class="container">
	<div class="head" {if $circle_banner} style=" background:url({$circle_banner});background-size:cover;" {/if}>
		<div class="head-portrait">
			<span>{$member['truename']}</span>
			<img src="{$member['avatar']}" alt="" style="z-index:10;">
		</div>
	</div>
	<div class="content">
		<div class="abc"></div>
		{if $newMagessCount > 0}
			<div class="advices" url="<?php echo url('school/ring/news',array('ids'=>$ids))?>">
				<div>
					<img src="{$newMagess['user']['avatar']}" alt="">
					<span>{$newMagessCount}条新消息</span>
					<img src="{__ROOT__}template/default/statics/img/jiantou.png" alt="">
				</div>
			</div>
		{/if}
		<?php foreach($circles as $k => $v){?>
		<div class="list" id="list{$v['id']}">
			<div class="item">
				<div class="item-left">
					<img src="{$v['user']['avatar']}" alt="">
				</div>
				<div class="item-right">
					<div class="item-content">
						<span>{$v['user']['truename']}</span>
						<span>{$v['title']}</span>
					</div>
					{if $v['material']}
					<div class="item-img">
						<?php foreach($v['material'] as $kk => $vv){
						$arr=explode('.', $vv);
						if($arr[count($arr)-1] == 'MP4' || $arr[count($arr)-1] == 'MOV'){
						?>
						<video src="{$vv}" style=" height:80px; width:80px; border:1px solid #efefef; margin-bottom:11px;margin-right:3px;" controls
						 preload></video>
						<?php }else{?>
                        <!-- <span style=" width:26%;margin-right:3%;margin-bottom:11px; border:1px solid #efefef; "> -->
						<span class="img-box contentImg" style="background-image:url('{$vv}')" src="<?php echo "http://".$_SERVER['HTTP_HOST']."/";?>{$vv}" id="{$v['id']}"></span>	
                        <!-- </span> -->
						<?php }}?>
					</div>
					{/if}
					<div class="discuss">
						<span style="font-size:12px; color:#777;">{$v['time_tran']}</span>
						<img class="ping-img" id="btn-img" src="{__ROOT__}template/default/statics/img/pinglun.png" alt="">
						<div class="edit-list" id="btn-ping" {if $member[ 'group_id']==3 } style="width:225px;" {/if}>
							{if $member['group_id'] == 3}
							<span class="delete" data-id="{$v['id']}" data-uid="{$v['mid']}">
								<i>删除</i>
							</span>
							{/if}
							<span class="like" data-id="{$v['id']}" data-uid="{$v['mid']}">
								{if $v['mylike'] > 0}
								<img src="{__ROOT__}template/default/statics/img/zan.png" alt="">
								<i>取消赞</i>
								{else}
								<img src="{__ROOT__}template/default/statics/img/zan.png" alt="">
								<i>赞</i>
								{/if}
							</span>
							<span class="btn-ping" data-id="{$v['id']}" data-uid="{$v['mid']}">
								<img src="{__ROOT__}template/default/statics/img/pinglun1.png" alt="">
								<i class="pl">评论</i>
							</span>
						</div>
					</div>

					<div class="discuss-detail">
						<i class="sanjia" {if !$v[ 'like'] && !$v[ 'comments']}style="display:none;" {/if}></i>
						<div class="discuss-detail-head" id="like-list-{$v['id']}" {if !$v[ 'like']}style="display:none;" {/if}>
							<img src="{__ROOT__}template/default/statics/img/like.png" alt="">
							<?php 
							$i=0;
							foreach($v['like'] as $kk => $vv){
							if($vv['truename']){
							if($i > 0){
								$vv['truename'] = ",&nbsp;".$vv['truename'];
							}
							$i++;
							?>
							<span id="like{$v['id']}{$vv['id']}">{$vv['truename']}</span>
							<?php }}?>
						</div>
						<ul class="discuss-list" id="comments-list-{$v['id']}" {if !$v[ 'comments']}style="display:none;" {/if}>
							<?php foreach($v['comments'] as $kk => $vv){
							if($vv['truename']){
							?>
							<li class="revert" data-id="{$v['id']}" data-uid="{$v['mid']}" data-rid="{$vv['mid']}">
								{if $vv['rid'] > 0}
								<span>{$vv['truename']}</span>回复
								<span>{$vv['rtruename']}:</span>
								{else}
								<span>{$vv['truename']}:</span>
								{/if} {$vv['content']}
							</li>
							<?php }}?>
						</ul>
					</div>

				</div>
			</div>
		</div>
		<?php }?>
	</div>
	<div class="mask-pinlun" style="position:absolute;">
		<input name="content" type="text" placeholder="评论" class="mask-content">
		<input type="hidden" name="id" />
		<input type="hidden" name="uid" />
		<input type="hidden" name="rid" />
		<!--img src="{__ROOT__}template/default/statics/img/biaoqin.png" alt=""-->
		<span class="active active1">发送</span>
	</div>
</div>
<link type="text/css" rel="stylesheet" href="{__ROOT__}statics/js/upload/uploader.css?v={HD_VERSION}" />
<script type="text/javascript" src="{__ROOT__}statics/js/upload/uploader.js?v={HD_VERSION}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>	

	$(".contentImg").click(function () {
		var id = $(this).attr('id');
		var imgsurl = [];
		var nowurl = '';
		var imgObj = $("#list" + id).find(".item-img .img-box");
		nowurl = $(this).attr('src');
		imgObj.each(function(i){
			imgsurl[i] = $(this).attr('src');
		});
		wx.previewImage({	
			current: nowurl,
			urls: imgsurl
		});
	});
	$(".like").click(function () {
		var id = $(this).attr('data-id');
		var uid = $(this).attr('data-uid');
		var _this = $(this);
		var ajaxurl = "<?php echo url('school/ring/likes')?>";
		$(this).parent().hide();
		$.post(ajaxurl, { 'id': id, 'uid': uid }, function (ret) {
			if (ret.status == 1) {
				if (ret.result.type == 0) {
					$("#like-list-" + ret.result.id).show();
					if ($("#like-list-" + ret.result.id).children('span').length > 0) {
						$("#like-list-" + ret.result.id).append('<span id="like' + ret.result.id + ret.result.cid + '">,&nbsp;' + ret.result.truename + '&nbsp;</span>');
					} else {
						$("#like-list-" + ret.result.id).append('<span id="like' + ret.result.id + ret.result.cid + '">' + ret.result.truename + '&nbsp;</span>');
					}

					_this.children("i").text("取消赞");
				} else if (ret.result.type == 1) {
					$("#like" + ret.result.id + ret.result.cid).remove();
					if ($("#like-list-" + ret.result.id).children('span').length == 0) {
						$("#like-list-" + ret.result.id).hide();
					}
					_this.children("i").text("赞");
				}
			} else {
				alerts(ret.message);
			}
		}, 'json');
	});

	$(".delete").click(function () {
		var id = $(this).attr('data-id');
		var _this = $(this);
		var ajaxurl = "<?php echo url('school/ring/delete')?>";
		$.post(ajaxurl, { 'id': id }, function (ret) {
			if (ret.status == 1) {
				$("#list" + id).remove();
			} else {
				alerts(ret.message);
			}
		}, 'json');
	});

	$(".active1").click(function () {
		var id = $("[name='id']").val();
		var uid = $("[name='uid']").val();
		var rid = $("[name='rid']").val();
		var content = $("[name='content']").val();
		$("[name='content']").blur();
		var _this = $(this);
		var ajaxurl = "<?php echo url('school/ring/message')?>";
		$.post(ajaxurl, { 'id': id, 'uid': uid, 'rid': rid, 'content': content }, function (ret) {
			if (ret.status == 1) {
				$("#comments-list-" + ret.result.id).show();
				if (ret.result.rid > 0) {
					$("#comments-list-" + ret.result.id).append('<li data-id="' + ret.result.id + '" data-uid="' + uid + '" data-rid="' + ret.result.mid + '"><span>' + ret.result.truename + '</span>回复<span>' + ret.result.rtruename + ':</span>' + content + '</li>');
				} else {
					$("#comments-list-" + ret.result.id).append('<li data-id="' + ret.result.id + '" data-uid="' + uid + '" data-rid="' + ret.result.mid + '"><span>' + ret.result.truename + ':</span>' + content + '</li>');
				}
				$("[name='content']").val('')
			} else {
				alerts(ret.message);
			}
		}, 'json');
	});

	var uploader = WebUploader.create({
		auto: true,
		fileVal: 'upfile',
		// swf文件路径
		swf: '{__ROOT__}statics/js/upload/uploader.swf',
		// 文件接收服务端。
		server: "<?php echo url('attachment/index/upload')?>",
		// 选择文件的按钮。可选
		formData: {
			file: 'upfile',
			upload_init: '<?php echo $attachment_init ?>'
		},
		// 压缩图片大小
		/*compress: {
			width: 408,
			height: 408,
			quality: 80,
			allowMagnify: false
		},*/
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: {
			id: '#file-avatar',
			multiple: false
		},
		accept: {
			title: '图片文件',
			//extensions: 'gif,jpg,jpeg,bmp,png',
			mimeType: 'image/*'
		},
		chunked: false,
		chunkSize: 1000000,
		resize: false
	});
	uploader.onFileQueued = function (file) {
		alerts("图片上传中...", 3);
	}
	uploader.onUploadError = function (file, reason) {
		alerts("图片上传失败");
	}
	uploader.onUploadSuccess = function (file, response) {
		if (response.status == 1) {
			window.location.href = "<?php echo url('school/ring/add')?>&img=" + response.result.url;
			//$("input[name=head]").attr("value", response.result.url);
			//$(".head").find('img').attr("src", '{__ROOT__}'+response.result.url);
		} else {
			alerts(response.message);
		}
	}
	
	$(".advices").click(function(){
		var url = $(this).attr('url');
		$(this).hide();
		window.location.href = url;	
	});
	$(".ping-img").click(function () {
		$(".edit-list").hide();
		$(this).next().fadeToggle();
		$(this).next().css("display", "flex");
		$('body').bind('click', function (event) {
			// IE支持 event.srcElement ， FF支持 event.target			
			var evt = event.srcElement ? event.srcElement : event.target;
			if (evt.id == 'btn-ping' || evt.id == "btn-img") return; // 如果是元素本身，则返回
			else {
				$('#btn-ping').hide(); // 如不是则隐藏元素
			}
		});
	});
    /*$(".img-btn").click(function () {
        $(".mask").show();
        $(".mask-img").show();
    })*/
	$(".mask").click(function () {
		$(this).hide();
		$(".mask-img").hide();
	})
	$(".mask-item3").click(function () {
		$(".mask-img").hide();
		$(".mask").hide();
	});
	
	$('body').bind('click', function (event) {
		// IE支持 event.srcElement ， FF支持 event.target  
		var evt = event.srcElement ? event.srcElement : event.target;
		if (evt.className == 'mask-pinlun' || evt.className == 'pl' || evt.className == 'revert' || evt.className == 'btn-ping') {
			return; // 如果是元素本身，则返回
		}else {
			$('.mask-pinlun').hide(); // 如不是则隐藏元素
		}
	});
		
	$(".btn-ping").click(function () {
		var _h = $(this).offset().top - $(document).scrollTop();
		var _top = $(document).scrollTop()+_h - ($(window).height()/3);	
		if($(document).height() - _top < ($(window).height()/3)*2){
			$(".container").height($(document).height()+($(window).height()/3)*2);
		}
		$(".footer").css("position", "static");
		var id = $(this).attr('data-id');
		var uid = $(this).attr('data-uid');
		var rid = $(this).attr('data-rid');
		$("[name='id']").val(id);
		$("[name='uid']").val(uid);
		$("[name='rid']").val(rid);
		$(".mask-pinlun").css("display", "flex");
		$(".mask-pinlun").css("bottom", $(document).height() - $(this).offset().top  - 120);
		$(window).scrollTop(_top);
		$(this).parent().hide();
		$(".mask-pinlun .mask-content").focus();
		$(".mask-pinlun .mask-content").attr("placeholder", "评论")
		$(".edit-list").hide;
		//滚动关闭评论输入框
		$(window).on('touchmove', function () {
			$(".mask-pinlun").hide();
			$(".edit-list").hide();
			$(".mask-pinlun input").blur();
			$(".footer").css({'position':'fixed','bottom':'0'});
		});
		
		//解决第三方软键盘唤起时底部input输入框被遮挡问题	
		/*$("input.mask-content").focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件
			/*interval = setInterval(function () {
				$(".mask-pinlun .mask-content").scrollIntoView(true);
				$(".mask-pinlun .mask-content").scrollIntoViewIfNeeded();
			}, 200);*/
		/*}).blur(function () {//设定输入框失去焦点时的事件
			//clearInterval(interval);//清除计时器
		});*/
		
		
		// var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
		// $("input.mask-content").focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件

		// 	interval1 = setInterval(function () {//设置一个计时器，时间设置与软键盘弹出所需时间相近
		// 		document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
		// 	}, 100)
		// }).blur(function () {//设定输入框失去焦点时的事件
		// 	clearInterval(interval1);//清除计时器
		// 	document.body.scrollTop = bfscrolltop; //将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
		// });
	});

	
	$(".revert").click(function () {
		var _h = $(this).offset().top - $(document).scrollTop();
		var _top = $(document).scrollTop()+_h - ($(window).height()/3);	
		if($(document).height() - _top < ($(window).height()/3)*2){
			$(".container").height($(document).height()+($(window).height()/3)*2);
		}
		$(".footer").css("position", "static");
		var id = $(this).attr('data-id');
		var uid = $(this).attr('data-uid');
		var rid = $(this).attr('data-rid');
		$("[name='id']").val(id);
		$("[name='uid']").val(uid);
		$("[name='rid']").val(rid);
		$(".mask-pinlun").css("display", "flex");
		$(".mask-pinlun .mask-content").focus();
		$(".mask-pinlun").css("bottom", $(document).height() - $(this).offset().top -  120);	
		
		$(window).scrollTop(_top);
		$(".mask-pinlun .mask-content").attr("placeholder", "回复" + $(this).children('span:first-child').text() + "")
		$(".edit-list").hide();
		//滚动关闭评论输入框
		$(window).on('touchmove', function () {
			$(".mask-pinlun").hide();
			$(".edit-list").hide();
			$(".mask-pinlun .mask-content").blur();
			$(".footer").css({'position':'fixed','bottom':'0'});
		});
		//解决第三方软键盘唤起时底部input输入框被遮挡问题	
		/*$("input.mask-content").focus(function () {
			// if (navtype() == 'i') {
				interval = setInterval(function () {
					$(".mask-pinlun .mask-content").scrollIntoView(true);
					$(".mask-pinlun .mask-content").scrollIntoViewIfNeeded();
				}, 200)
			// } else {
			// 	interval = setInterval(function () {//设置一个计时器，时间设置与软键盘弹出所需时间相近
			// 		document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
			// 	}, 100)
			// }
		}).blur(function () {//设定输入框失去焦点时的事件
			clearInterval(interval)//清除计时器
		});*/
		// var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
		// $("input.mask-content").focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件
		// 	interval1 = setInterval(function () {//设置一个计时器，时间设置与软键盘弹出所需时间相近
		// 		document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
		// 	}, 100)
		// }).blur(function () {//设定输入框失去焦点时的事件
		// 	clearInterval(interval1);//清除计时器
		// 	document.body.scrollTop = bfscrolltop; //将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
		// });
	});
	
	//判断手机类型
	function navtype() {
		var typ = '';
		var u = navigator.userAgent;
		if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
			typ = 'a';
		} else if (u.indexOf('iPhone') > -1) {//苹果手机
			typ = 'i';
		} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
			typ = 'w';
		}
		return typ;
	}
	//解决input被挡问题
	// var timerId = null;
	// function onFocus() {
	// 	let cnt = 0;
	// 	setInterval(() => {
	// 		if (cnt < 3) {
	// 			cnt++;
	// 		} else {
	// 			clearInterval(timerId);
	// 			timerId = null;
	// 			return;
	// 		}
	// 		document.body.scrollTop = document.body.scrollHeight;
	// 	}, 300);
	// }
	// function onBlur() {
	// 	if (timerId) {
	// 		clearInterval(timerId);
	// 		timerId = null;
	// 	}
	// }

</script>
<?php include template('footer','common');?>